<template>
  <div class="lossedit">
    <el-dialog title="列表编辑详情" :visible.sync="dialogEdit" width="66%">
      <el-form ref="form" :model="form" size="medium">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">单据日期</el-col>
              <el-col :span="16">
                <el-form-item prop="cg_date">
                  <el-date-picker
                    v-model="form.cg_date"
                    type="date"
                    format="yyyy-MM-dd"
                    placeholder="单据日期" style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">单据编号</el-col>
              <el-col :span="16"><el-form-item prop="cg_no"><el-input v-model="form.cg_no"></el-input></el-form-item></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">仓库</el-col>
              <el-col :span="16">
                <el-form-item prop="warehouse">
                  <el-select v-model="form.warehouse" clearable placeholder="所有仓库" style="width: 100%;">
                    <el-option
                      v-for="(item,index) in wareList"
                      :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">商品</el-col>
              <el-col :span="16"><el-form-item prop="goods"><el-input v-model="form.goods"></el-input></el-form-item></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">购货单价(元)</el-col>
              <el-col :span="16"><el-form-item prop="purchase_price"><el-input v-model="form.purchase_price" ></el-input></el-form-item></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">购货金额(元)</el-col>
              <el-col :span="16"><el-form-item prop="purchase_amount"><el-input v-model="form.purchase_amount"></el-input></el-form-item></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">单位</el-col>
              <el-col :span="16"><el-form-item prop="unit"><el-input v-model="form.unit" ></el-input></el-form-item></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">数量</el-col>
              <el-col :span="16"><el-form-item prop="amount"><el-input v-model="form.amount"></el-input></el-form-item></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">损耗数量</el-col>
              <el-col :span="16"><el-form-item prop="loss_amount"><el-input v-model="form.loss_amount" ></el-input></el-form-item></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">损耗原因</el-col>
              <el-col :span="16"><el-form-item prop="loss_cause"><el-input v-model="form.loss_cause"></el-input></el-form-item></el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="ban-btn">
        <el-button @click="close">返 回</el-button>
        <el-button class="save" @click="ok('form')">保 存</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'LossEdit',
  props:{
    rows:{}
  },
  data() {
    return {
      dialogEdit: false,
      form: {
        cg_date: '',
        cg_no: '',
        warehouse: '',
        goods: '',
        purchase_price: '',
        purchase_amount: '',
        unit: '',
        amount: '',
        loss_amount: '',
        loss_cause: ''
      },
      wareList: [
        {value: '0',label:'所有仓库'},
        {value: '1',label:'南宁仓库'}
      ],
    }
  },
  created() {
  },
  methods:{
    //打开对话框
    openEdit() {
      this.dialogEdit = true;
      this.form = {
        cg_date: this.rows.cg_date,
        cg_no: this.rows.cg_no,
        warehouse: this.rows.warehouse,
        goods: this.rows.goods,
        purchase_price: this.rows.purchase_price,
        purchase_amount: this.rows.purchase_amount,
        unit: this.rows.unit,
        amount: this.rows.amount,
        loss_amount: this.rows.loss_amount,
        loss_cause: this.rows.loss_cause
      }
    },
     //新增
    openAdd() {
      this.dialogEdit = true;
    },

    close() {
      this.dialogEdit = false;
      this.form = {
        cg_date: '',
        cg_no: '',
        warehouse: '',
        goods: '',
        purchase_price: '',
        purchase_amount: '',
        unit: '',
        amount: '',
        loss_amount: '',
        loss_cause: ''
      }
    },

    //保存表单
    ok () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log(this.form)
          this.dialogEdit = false;
          this.form = {
            cg_date: '',
            cg_no: '',
            warehouse: '',
            goods: '',
            purchase_price: '',
            purchase_amount: '',
            unit: '',
            amount: '',
            loss_amount: '',
            loss_cause: ''
          };
          this.$message.success('保存成功')
        } else {
          this.$message.error('表单验证失败!')
        }
      })
    }
  }
}
</script>

<style>
</style>
